<template>
  <view class="applet-guide-container">
    <block v-if="list && list.length > 0">
      <view class="applet-content" v-for="item in list" :key="item.id">
        <view class="applet-detail">
          <image :src="item.logo" mode="scaleToFill" class="applet-logo" />
          <view class="applet-info">
            <view class="applet-name">{{ item.name }}</view>
            <view v-if="item.appletGuide" class="applet-des">{{
              item.appletGuide.describe
            }}</view>
          </view>
        </view>
        <block v-if="item.appletGuide">
          <!-- 上传文件 -->
          <view class="center-content">
            <!-- <view class="commission-des">
              <text class="ratio-text">分佣比例</text>
              <text v-if="item.applet_use_type === '1'" class="ratio-number">{{ item.author_proportion }}%</text>
              <text v-else-if="item.appid === 'ks652177522651643311'" class="ratio-number">{{ item.author_proportion }}%</text>
              <text v-else="item.applet_use_type === '2'" class="ratio-number">{{ item.author_member_proportion }}%</text>
            </view> -->
            <view class="commission-des">
              <text class="ratio-text">推广平台</text>
              <image
                v-if="item.applet_type === 'mp-toutiao'"
                src="@/static/icon/dy2.png"
                mode="scaleToFill"
                class="applet-icon"
              />
              <image
                v-else-if="item.applet_type === 'mp-kuaishou'"
                src="@/static/icon/ks2.png"
                mode="scaleToFill"
                class="applet-icon"
              />
              <image
                v-if="item.applet_type === 'mp-weixin'"
                src="@/static/icon/weixin2.png"
                mode="scaleToFill"
                class="applet-icon"
              />
              <image
                v-if="item.applet_type === 'mp-qq'"
                src="@/static/icon/qq2.png"
                mode="scaleToFill"
                class="applet-icon"
              />
            </view>
            <view
              v-if="item.applet_use_type === '1'"
              @click="goArtworksCenter"
              class="upload-artworks-btn"
            >
              <text>上传文件</text>
              <text class="huiju-iconfont huiju-icon-shangchuan"></text>
            </view>
            <view
              v-if="item.applet_use_type === '2'"
              @click="handlePromotion(item)"
              class="upload-artworks-btn"
            >
              <text>立即推广</text>
              <u-icon name="grid" color="#fff" size="24"></u-icon>
            </view>
          </view>
          <!-- 抖音、快手、QQ挂载指引 -->
          <block v-if="item.applet_type !== 'mp-weixin'">
            <!-- 引导 -->
            <view class="guide-container">
              <view class="guide-header-container">
                <view class="guide-header-left">
                  <view
                    v-if="item.appletGuide.video_guide"
                    class="btn-item"
                    :class="{
                      'active-item': item.currentGuide === 'videoGuide',
                    }"
                    @click.native="changeGuide(item, 'videoGuide')"
                    >视频引导</view
                  >
                  <view
                    v-if="item.appletGuide.copywriter_guide.length > 0"
                    class="btn-item"
                    :class="{
                      'active-item': item.currentGuide === 'copywriterGuide',
                    }"
                    @click.native="changeGuide(item, 'copywriterGuide')"
                    >文案引导</view
                  >
                  <view
                    v-if="item.appletGuide.bg_guide.length > 0"
                    class="btn-item"
                    :class="{
                      'active-item': item.currentGuide === 'bgGuide',
                    }"
                    @click.native="changeGuide(item, 'bgGuide')"
                    >背景图引导</view
                  >
                </view>
                <view
                  v-if="
                    item.appletGuide &&
                    ((item.appletGuide.dy_usage_guide &&
                      item.appletGuide.dy_usage_guide.length > 0) ||
                      item.appletGuide.bg_usage_guide)
                  "
                  class="guide-header-right"
                  @click="handleUsed(item.appletGuide)"
                >
                  <text>用法示意</text>
                  <u-icon
                    name="question-circle"
                    color="#56d39d"
                    size="24"
                  ></u-icon>
                </view>
              </view>
            </view>
            <!-- 引导框 -->
            <view class="guide-content">
              <!-- 文案 -->
              <view
                v-if="
                  item.appletGuide.copywriter_guide &&
                  item.appletGuide.copywriter_guide.length > 0 &&
                  item.currentGuide === 'copywriterGuide'
                "
                class="copywriter-guide"
              >
                <!-- 抖音、快手、QQ -->
                <view
                  v-for="(textItem, index) in item.appletGuide.copywriter_guide"
                  :key="index"
                  class="copywriter-guide-item"
                  :class="{
                    'border-none':
                      index + 1 == item.appletGuide.copywriter_guide.length,
                  }"
                >
                  <view class="copywriter-guide-item-left">
                    <text>{{ textItem.text }}</text>
                  </view>
                  <view
                    @click="getCodeList(textItem.text, item)"
                    class="copywriter-guide-item-right"
                  >
                    <text>复制</text>
                  </view>
                </view>
              </view>
              <!-- 背景图 -->
              <view
                v-if="
                  item.appletGuide.bg_guide &&
                  item.appletGuide.bg_guide.length > 0 &&
                  item.currentGuide === 'bgGuide'
                "
                class="bg-guide"
              >
                <BgGuide :bg-guide="item.appletGuide.bg_guide"></BgGuide>
              </view>
              <!-- 视频指引 -->
              <view
                v-if="
                  item.appletGuide.video_guide &&
                  item.currentGuide === 'videoGuide'
                "
                class="bg-guide"
              >
                <video
                  :src="item.appletGuide.video_guide"
                  :poster="getposter(item)"
                  :webkit-playsinline="true"
                  :danmu-btn="false"
                  controls
                  class="video-guide"
                  style="object-fit: contain"
                ></video>
              </view>
            </view>
          </block>
          <block v-else>
            <view class="guide-container">
              <view class="guide-header-container">
                <view class="guide-header-left">
                  <!-- <view
                    class="btn-item"
                    :class="{
                      'active-item': item.currentGuide === 'mountGuide'
                    }"
                    @click.native="changeGuide(item, 'mountGuide')">挂载引导</view> -->
                  <view
                    class="btn-item"
                    :class="{
                      'active-item': item.currentGuide === 'selfMountGuide',
                    }"
                    @click.native="changeGuide(item, 'selfMountGuide')"
                    >自挂载</view
                  >
                  <view
                    class="btn-item"
                    :class="{
                      'active-item': item.currentGuide === 'officeGuide',
                    }"
                    @click.native="changeGuide(item, 'officeGuide')"
                    >公众号接入</view
                  >
                </view>
              </view>
            </view>
            <view class="guide-content">
              <!-- 挂载引导 -->
              <view
                v-if="item.currentGuide === 'mountGuide'"
                class="mountGuide-guide"
              >
                <view class="mountGuide-header">
                  <view
                    v-if="item.appletGuide && item.appletGuide.video_guide"
                    @click="showVideoMountGuide = true"
                    class="header-left"
                  >
                    <text>挂载引导视频</text>
                    <u-icon
                      name="play-circle-fill"
                      color="#56d39d"
                      size="28"
                      style="margin-left: 6rpx"
                    ></u-icon>
                  </view>
                  <view class="header-right" @click="getCodeList('', item)">
                    <text>选择口令</text>
                    <u-icon
                      name="play-right-fill"
                      color="#56d39d"
                      size="24"
                      style="margin-left: 6rpx"
                    ></u-icon>
                  </view>
                </view>
                <u-input
                  v-model="weixinHerf"
                  type="textarea"
                  :disabled="true"
                  :custom-style="{
                    color: '#b8b8b8',
                    fontSize: '24rpx',
                  }"
                  class="weixin-herf"
                />
                <view class="mount-footer">
                  <view class="herf-log" @click="goWeixinArticleUrlLog">
                    <u-icon
                      name="order"
                      color="#56d39d"
                      size="28"
                      style="margin-right: 6rpx"
                    ></u-icon>
                    <text>记录</text>
                  </view>
                  <view class="copy-btn">
                    <view
                      v-if="!publish_id && currentCode"
                      class="text"
                      @click="getCodeList('', item)"
                      >请先选择口令</view
                    >
                    <view
                      v-else-if="publish_id && !currentWeixinArticleUrl"
                      class="text"
                      >{{ showText }}</view
                    >
                    <view
                      v-else
                      class="text"
                      @click="setClipboardData(weixinHerf)"
                      >复制链接</view
                    >
                  </view>
                </view>

                <!-- 视频弹窗 -->
                <u-popup
                  v-model="showVideoMountGuide"
                  border-radius="16"
                  mode="center"
                  width="580rpx"
                >
                  <view class="popup-content">
                    <view class="video-view">
                      <video
                        :src="item.appletGuide.video_guide"
                        :webkit-playsinline="true"
                        :danmu-btn="false"
                        :auto-play="true"
                        object-fit="contain"
                        poster="https://dutuku.img.isvg.cn/2023/08/03/20230803143938-20230803143902.jpg"
                        controls
                        class="video-guide"
                      ></video>
                    </view>
                  </view>
                  <view class="close-icon" @click="showVideoMountGuide = false">
                    <u-icon name="close-circle" color="#fff" size="58"></u-icon>
                  </view>
                </u-popup>
              </view>
              <!-- 自挂载 -->
              <view
                v-else-if="
                  item.appletGuide.bg_guide &&
                  item.appletGuide.bg_guide.length > 0 &&
                  item.currentGuide === 'selfMountGuide'
                "
                class="mountGuide-guide"
              >
                <view class="mountGuide-header">
                  <!-- <view v-if="item.appletGuide && item.appletGuide.video_guide" class="header-left">
                    <block @click="showVideoMountGuide = true">
                      <text>如何进行自挂载推广</text>
                      <u-icon name="play-circle-fill" color="#56d39d" size="28" style="margin-left: 6rpx;"></u-icon>
                    </block>
                  </view> -->
                  <view class="header-left">
                    <text>左右滑动切换挂载背景</text>
                  </view>
                  <view class="header-right" @click="getCodeList('', item)">
                    <text>选择口令</text>
                    <u-icon
                      name="play-right-fill"
                      color="#56d39d"
                      size="24"
                      style="margin-left: 6rpx"
                    ></u-icon>
                  </view>
                </view>
                <SelfMountGuide
                  ref="selfMountGuide"
                  :bg-guide="item.appletGuide.bg_guide"
                ></SelfMountGuide>
              </view>
              <!-- 自挂载 -->
              <view
                v-else-if="item.currentGuide === 'officeGuide'"
                class="mountGuide-guide"
              >
                <view class="mountGuide-header">
                  <!-- <view v-if="item.appletGuide && item.appletGuide.video_guide" class="header-left">
                    <block @click="showVideoMountGuide = true">
                      <text>如何进行自挂载推广</text>
                      <u-icon name="play-circle-fill" color="#56d39d" size="28" style="margin-left: 6rpx;"></u-icon>
                    </block>
                  </view> -->
                  <view class="header-left">
                    <text>适合有公众号的达人</text>
                  </view>
                  <!-- <view class="header-right" @click="getCodeList('', item)">
                    <text>选择口令</text>
                    <u-icon name="play-right-fill" color="#56d39d" size="24" style="margin-left: 6rpx;"></u-icon>
                  </view> -->
                </view>
                <!-- 复制文案 -->
                <view class="copywriter-guide-item copywriter-guide-item2">
                  <view class="copywriter-guide-item-left">
                    <text>自动回复代码</text>
                  </view>
                  <view
                    @click="
                      getCodeList(
                        `hi ，终于等到您啦！\n\n<a href='#' data-miniprogram-path='pages/index/index?search_code=【自己口令】' data-miniprogram-appid='${item.appid}' >点此进入免费下载>></a>\n\n➢为方便取图 请置顶公众号`,
                        item
                      )
                    "
                    class="copywriter-guide-item-right"
                  >
                    <text>获取</text>
                  </view>
                </view>
                <view class="copywriter-guide-item copywriter-guide-item2">
                  <view class="copywriter-guide-item-left">
                    <text>自定义菜单路径</text>
                  </view>
                  <view
                    @click="
                      getCodeList(
                        'pages/index/index?search_code=【自己口令】',
                        item,
                        'zidingyicaidanlujin'
                      )
                    "
                    class="copywriter-guide-item-right"
                  >
                    <text>获取</text>
                  </view>
                </view>
                <view class="copywriter-guide-item copywriter-guide-item2">
                  <view class="copywriter-guide-item-left">
                    <text>公众号简介引导</text>
                  </view>
                  <view
                    @click="
                      getCodeList(
                        '每日更新大量优质头像/壁纸/表情包/背景图，关注我，给你不一样的精彩！',
                        item
                      )
                    "
                    class="copywriter-guide-item-right"
                  >
                    <text>获取</text>
                  </view>
                </view>
              </view>
            </view>
          </block>
        </block>
      </view>
    </block>
    <!-- 数据空 -->
    <view v-else class="empty">
      <image
        style="width: 350rpx; height: 350rpx"
        src="https://img.alicdn.com/imgextra/i1/1888948409/O1CN01CSQqUP2BzNNzcB96v_!!1888948409.png"
        mode="scaleToFill"
      />
      <view class="empty-tips">
        <text>正在紧急上线中，敬请期待~</text>
      </view>
    </view>
    <!-- 示意 -->
    <UsedGuide
      :popup-show="used.show"
      :info="used.info"
      @close="used.show = false"
    ></UsedGuide>

    <!-- 选择主页 移动图片 -->
    <u-select
      v-model="codeInfo.showSelect"
      :list="codeInfo.codeList"
      title="请选择口令"
      confirm-color="#56d39d"
      value-name="code"
      label-name="code"
      @confirm="confirmCode"
    ></u-select>

    <!-- 选择生成的类型 -->
    <u-popup
      v-model="showMountType"
      border-radius="16"
      mode="center"
      width="630rpx"
    >
      <view class="wechat-popup">
        <!-- 头部 -->
        <view class="header">
          <view class="current-code">
            <view class="left">{{
              currentSelectWeixinTabs === "image" ? "口令" : "指向口令"
            }}</view>
            <view class="code">{{ currentCode }}</view>
          </view>
          <view class="change-code" @click="changeCode">
            <text>更换口令</text>
            <u-icon
              name="reload"
              color="#172B4D"
              size="24"
              style="margin-left: 6rpx"
            ></u-icon>
          </view>
        </view>
        <!-- 选择类型 -->
        <view class="select-weixin-tabs">
          <view
            class="tabs-item"
            :class="{
              'tabs-active-item': currentSelectWeixinTabs === 'image',
            }"
            @click="handleWeixinTabs('image')"
            >图片素材</view
          >
          <view
            class="tabs-item"
            :class="{
              'tabs-active-item': currentSelectWeixinTabs === 'tool',
            }"
            @click="handleWeixinTabs('tool')"
            >工具玩法</view
          >
        </view>
        <!-- 选择挂载的类型 -->
        <view class="select-scroll">
          <scroll-view
            :scroll-y="true"
            class="scroll-container"
            lower-threshold="100"
            @scrolltolower="loadMore"
          >
            <view
              v-if="currentSelectWeixinTabs == 'image'"
              class="image-content"
            >
              <view
                v-for="item in artworksTypeAllListData"
                :key="item.id"
                class="image-type-item"
                @click="handleArtworksType(item.id)"
              >
                <view class="type-name">{{ item.type_name }}</view>
                <image
                  v-if="item.id == artworks_type_id"
                  src="@/static/icon/checked.png"
                  mode="scaleToFill"
                  class="checkbox"
                />
                <image
                  v-else
                  src="@/static/icon/unchecked.png"
                  mode="scaleToFill"
                  class="checkbox"
                />
              </view>
            </view>
            <view v-else class="image-content">
              <block v-if="artworksList && artworksList.length > 0">
                <view
                  v-for="item in artworksList"
                  :key="item.id"
                  class="image-type-item"
                  @click="handleArtworksType(item.tid, item.id)"
                >
                  <image
                    :src="item.cover_url"
                    mode="scaleToFill"
                    class="tool_image"
                  />
                  <view class="type-name">{{ item.title }}</view>
                  <image
                    v-if="item.tid == tool_id"
                    src="@/static/icon/checked.png"
                    mode="scaleToFill"
                    class="checkbox"
                  />
                  <image
                    v-else
                    src="@/static/icon/unchecked.png"
                    mode="scaleToFill"
                    class="checkbox"
                  />
                </view>
              </block>
              <block v-else>
                <view class="image-type-item" style="border-color: #56d39d">
                  <view
                    class="type-name"
                    style="text-align: center; color: #56d39d"
                    @click="goArtworksCenter"
                  >
                    <u-icon
                      name="plus"
                      color="#56d39d"
                      size="28"
                      style="margin-right: 6rpx"
                    ></u-icon>
                    <text>添加玩法</text>
                  </view>
                </view>
              </block>
            </view>
          </scroll-view>
        </view>
        <!-- 取消 -->
        <view class="wechat-popup-footer">
          <view class="close" @click="showMountType = false">取消</view>
          <view class="cread-link" @click="handleCreateWeixinArticleUrl()">
            <text>{{
              currentGuide === "mountGuide" ? "点击获取链接" : "点击获取"
            }}</text>
          </view>
        </view>
      </view>
    </u-popup>

    <!-- 选择生成的类型 -->
    <u-popup
      v-model="showOfficeMountType"
      border-radius="16"
      mode="center"
      width="630rpx"
    >
      <view class="wechat-popup" style="overflow-y: auto;">
        <!-- 头部 -->
        <view class="header">
          <view class="current-code">
            <view class="left">{{
              currentSelectWeixinTabs === "image" ? "口令" : "指向口令"
            }}</view>
            <view class="code">{{ currentCode }}</view>
          </view>
          <view class="close-icon" @click="showOfficeMountType = false">
            <u-icon
              name="close-circle"
              color="#172B4D"
              size="38"
              style="margin-left: 6rpx"
            ></u-icon>
          </view>
        </view>
        <view class="office-m">
        <view
          class="image-content"
        >
          <view
            v-for="(item,index) in navList"
            :key="item.picType"
            class="image-type-item"
            @click="handlePicType(index)"
          >
            <view class="type-name">{{ item.label }}</view>
            <image
              v-if="index == picTypeIndex"
              src="@/static/icon/checked.png"
              mode="scaleToFill"
              class="checkbox"
            />
            <image
              v-else
              src="@/static/icon/unchecked.png"
              mode="scaleToFill"
              class="checkbox"
            />
          </view>
        </view>
      </view>
        <view style="padding: 0 0 0 24rpx">
          <u-input
            v-model="guideText"
            type="text"
            :disabled="true"
            :custom-style="{
              color: '#172B4D',
              fontSize: '24rpx',
            }"
            class="weixin-herf"
          />
        </view>
        <!-- 取消 -->
        <view class="wechat-popup-footer">
          <view class="cread-link" @click="setClipboardData(guideText)">
            <text>一键复制</text>
          </view>
        </view>
      </view>
    </u-popup>

    <!-- 推广码 -->
    <u-modal
      v-model="showPromotion"
      :zoom="false"
      :show-title="false"
      :show-confirm-button="false"
      :mask-close-able="true"
      width="640"
    >
      <view class="tool-container">
        <view class="tool-tip-title">
          当前推广口令：{{ currentCode }}
          <view class="close-btn" @click="showPromotion = false">
            <u-icon
              name="close"
              color="#fff"
              size="38"
              style="margin-right: 8rpx"
            ></u-icon>
          </view>
        </view>
        <!-- 选择口令 -->
        <view class="tool-content">
          <!-- 按钮 -->
          <view
            v-if="currentAppletType === 'mp-toutiao'"
            class="tool-btn"
            @click="handleCopyPagePath"
          >
            <u-icon
              name="file-text"
              color="#fff"
              size="32"
              style="margin-right: 8rpx"
            ></u-icon>
            复制直播推广页面路径
          </view>
          <view class="tool-qrcode">
            <view class="qrcode-title" v-if="currentAppletType === 'mp-toutiao'"
              >抖音APP扫码绑定推广</view
            >
            <view
              class="qrcode-title"
              v-if="currentAppletType === 'mp-kuaishou'"
              >快手APP扫码绑定推广</view
            >
            <view class="qrcode-sub-title">定制类小程序仅支持扫码绑定推广</view>
            <image
              v-if="!douyinQrcode"
              class="qrcode-image"
              src="https://img.alicdn.com/imgextra/i1/1888948409/O1CN0122wBgf2BzNOZEfpIU_!!1888948409.png"
            ></image>
            <block v-else>
              <image class="qrcode-image" :src="douyinQrcode"></image>
              <view class="save-tip">长按保存,打开对应APP扫一扫</view>
            </block>
          </view>
        </view>
        <canvas
          canvas-id="qrcode"
          style="
            width: 800rpx;
            height: 800rpx;
            position: absolute;
            top: -2000rpx;
          "
        />
      </view>
    </u-modal>
  </view>
</template>

<script>
import uQRCode from "@/utils/uqrcode.js";
import {
  createWeixinArticleUrl,
  queryPublishStatus,
  createMountQrcode,
  picCategoryList
} from "@/api/applet";
import BgGuide from "./bgGuide.vue";
import SelfMountGuide from "./selfMountGuide.vue";
import UsedGuide from "./usedGuide.vue";
import { codeByUserId, findAllArtworksListByHomePage } from "@/api/artworks";
export default {
  components: {
    BgGuide,
    SelfMountGuide,
    UsedGuide,
  },
  props: {
    appletInfo: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  data() {
    return {
      list: [],
      used: {
        show: false,
        info: null,
      },
      guideText: "",
      codeInfo: {
        codeList: [],
        showSelect: false,
      },
      currentSelectWeixinTabs: "image",
      weixinHerf:
        "请点右上方选择口令并生成链接。首次生成需要一点时间，请耐心等待。",
      showVideoMountGuide: false,
      showMountType: false,
      showOfficeMountType: false,
      currentAppletType: "",
      currentCode: "",
      artworksTypeAllListData: [],
      applet_id: "", // 当前应用id
      artworks_type_id: "", // 当前挂载类型
      tool_id: "", // 挂载工具玩法id
      artworks_id: "", // 当前工具玩法的作品id
      articleTitle: "", // 文章描点
      publish_id: "", // 发布id
      author_id: "", // 当前选择的主页id
      cover_url: "",
      queryTime: null,
      queryCount: 0,
      currentWeixinArticleUrl: "",
      showText: "链接生成中..",
      artworksList: [],
      pageNum: 1,
      showNoMoreFlag: false,
      loadingList: false,
      currentGuide: "selfMountGuide",
      quertStatus: false, // 是否正在查询状态
      showPromotion: false,
      douyinQrcode: "",
      openText: "",
      navList:[],
      picTypeIndex:0
    };
  },
  watch: {
    appletInfo: {
      handler(val, oldValue) {
        if (val) {
          this.list = val;
        }
      },
    },
  },
  mounted() {
    console.log("appletInfo", this.appletInfo);
  },
  methods: {
    // 复制直播页面推广路径
    handleCopyPagePath() {
      let page = `pages/index/index?live=1&search_code=${
        this.currentCode || ""
      }`;
      this.setClipboardData(page);
    },

    // 点击推广
    handlePromotion(itemData) {
      this.applet_id = itemData.appid;
      this.currentAppletType = itemData.applet_type;
      this.currentGuide = "makeGuide";
      this.getCodeList();
    },

    // 点击生成链接
    handleCreateWeixinArticleUrl() {
      if (this.currentSelectWeixinTabs === "tool" && !this.tool_id) {
        uni.showToast({
          title: "请选择工具玩法",
          icon: "none",
        });
        return;
      }

      // 自挂载
      if (this.currentGuide === "selfMountGuide") {
        this.getMountQrcode();
        return;
      }

      uni.showLoading({
        title: "加载中...",
        mask: true,
      });
      this.queryCount = 0;
      createWeixinArticleUrl({
        code: this.currentCode,
        artworks_type_id: this.artworks_type_id,
        tool_id: this.tool_id,
        a_id: this.artworks_id,
        applet_id: this.applet_id,
        title: this.articleTitle,
        cover: this.cover_url,
      })
        .then((result) => {
          uni.hideLoading();
          if (result && result.data) {
            uni.hideLoading();
            this.showMountType = false;
            this.publish_id = result.data.publish_id;
            if (
              result.data.article_url &&
              result.data.article_url.indexOf("http://mp.weixin.qq.com/s?") < 0
            ) {
              this.weixinHerf = result.data.article_url;
              this.currentWeixinArticleUrl = result.data;
              return;
            }
            // else if (result.data.article_url.indexOf('http://mp.weixin.qq.com/s?') > -1 && result.data.publish_id) {
            //   this.queryPublishStatus();
            //   return;
            // }
            this.queryTime = setInterval(() => {
              let queryCount = this.queryCount;
              this.queryCount += 1;
              if (queryCount < 60) {
                this.showText += ".";
                if (queryCount > 16) {
                  this.queryPublishStatus();
                }
                if (queryCount % 3 === 0) {
                  this.showText = "链接生成中..";
                }
              } else {
                clearTimeout(this.queryTime);
              }
            }, 1000);
          }
        })
        .catch(() => {
          uni.hideLoading();
        });
    },

    // 查询发布状态
    queryPublishStatus() {
      if (this.quertStatus) {
        return;
      }
      this.quertStatus = true;
      queryPublishStatus({
        publish_id: this.publish_id,
      })
        .then((result) => {
          this.quertStatus = false;
          if (result && result.data && result.data.article_url) {
            this.currentWeixinArticleUrl = result.data;
            this.weixinHerf = result.data.article_url;
            clearTimeout(this.queryTime);
          } else {
            this.queryCount = 10;
          }
        })
        .catch(() => {
          this.quertStatus = false;
        });
    },

    // 获取自挂载二维码
    getMountQrcode() {
      uni.showLoading({
        title: "加载中...",
        mask: true,
      });
      createMountQrcode({
        code: this.currentCode,
        artworks_type_id: this.artworks_type_id,
        tool_id: this.tool_id,
        a_id: this.artworks_id,
        applet_id: this.applet_id,
        title: this.articleTitle,
        type: 2,
      })
        .then((result) => {
          uni.hideLoading();
          if (result && result.data && result.data.qrCode) {
            this.showMountType = false;
            this.$refs.selfMountGuide[0].createSelfMountGuide(
              result.data.qrCode
            );
          }
        })
        .catch(() => {
          uni.hideLoading();
        });
    },

    // 点击选择微信挂载类型
    handleWeixinTabs(type) {
      this.currentSelectWeixinTabs = type;
      this.artworks_type_id = "";
      this.tool_id = "";
      this.artworks_id = "";
      this.cover_url = "";
      if (type === "tool") {
        this.pageNum = 1;
        this.artworksList = [];
        this.getAllArtworksList();
      }
    },

    // 根据主页id和作品类型去获取作品列表
    getAllArtworksList() {
      const author_id = this.author_id; // 主页id
      const type = 9; // 类型id
      this.loadingList = true;
      uni.showLoading({
        title: "加载中...",
        mask: true,
      });
      findAllArtworksListByHomePage({
        author_id,
        type,
        pageSize: 36,
        pageNum: this.pageNum,
      })
        .then((result) => {
          uni.hideLoading();
          this.loadingList = false;
          if (result && result.data) {
            let artworksList = result.data.list;
            artworksList.forEach((item) => {
              item.checked = false;
            });
            this.artworksList = [...this.artworksList, ...artworksList];
            if (this.pageNum === result.data.total_pages) {
              this.showNoMoreFlag = true;
            } else {
              this.pageNum = this.pageNum + 1;
            }
          } else {
            this.artworksList = [];
          }
        })
        .catch(() => {
          uni.hideLoading();
          this.loadingList = false;
        });
    },

    // 点击选择类型
    handleArtworksType(id, artworks_id) {
      if (this.currentSelectWeixinTabs === "image") {
        this.artworks_type_id = id;
        const info = this.artworksTypeAllListData.filter(
          (item) => item.id == id
        )[0];
        this.articleTitle = id ? `${info.type_name}获取途径` : "原图获取途径";
      } else {
        const info = this.artworksList.filter((item) => item.tid == id)[0];
        this.articleTitle = info.title;
        this.cover_url = info.cover_url;
        this.tool_id = id;
        this.artworks_id = artworks_id;
      }
    },
    handlePicType(v){
      console.log('picTypeindex',v,this.currentCode)
      this.picTypeIndex = v
      if(v > 0 ){
        this.guideText = `pages/index/index?search_code=${this.currentCode}&tIndex=${v}`
      }else{
        this.guideText = `pages/index/index?search_code=${this.currentCode}`
      }
    },
    // 作品分类
    getArtworksTypeAllListData() {
      const artworksTypeAllListData = this.$store.state.artworksTypeAllListData;
      let list = [
        ...[{ type_name: "全部", id: "" }],
        ...artworksTypeAllListData,
      ];
      list.forEach((item) => {
        item.checked = false;
      });
      this.artworksTypeAllListData = list;
    },

    // 更多
    loadMore() {
      if (
        !this.showNoMoreFlag &&
        !this.loadingList &&
        this.currentSelectWeixinTabs === "tool"
      ) {
        this.getAllArtworksList();
      }
    },

    // getposter
    getposter(item) {
      let image = "";
      // if (item.id === 31) {
      //   image = 'https://dutuku.img.isvg.cn/2023/07/24/20230724221228-%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20230724220646.jpg';
      // } else if (item.id === 29) {
      //   image = 'https://dutuku.img.isvg.cn/2023/07/24/20230724225833-20230724220943.jpg';
      // } else if (item.id === 32 || item.id === 33) {
      //   image = 'https://dutuku.img.isvg.cn/2023/09/19/20230919151127-%E6%9C%88%E4%B8%8B%E5%AE%9A%E5%88%B6(1).jpg';
      // } else if (item.id === 35) {
      //   image = 'https://dutuku.img.isvg.cn/2024/01/07/20240107142129-%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20240107142116.jpg';
      // } else {
      //   image = item.appletGuide.video_guide + '?vframe/jpg/offset/1';
      // }
      return image;
    },

    // 获取code信息列表
    getCodeList(text, itemData, openText) {
      console.log("getCodeList", text, itemData, openText);
      this.guideText = text;
      this.openText = openText;
      codeByUserId({ code_type: "3" }).then((result) => {
        if (result && result.data && result.data.length > 0) {
          this.codeInfo.codeList = result.data;
          this.codeInfo.showSelect = true;
        }
      });
      this.currentAppletType = itemData.applet_type;
      this.applet_id = itemData.id;
      this.currentWeixinArticleUrl = null;
      this.weixinHerf =
        "请点右上方选择口令并生成链接。首次生成需要一点时间，请耐心等待。";
      this.publish_id = "";
      this.currentSelectWeixinTabs = "image";
    },

    // 更换口令
    changeCode() {
      this.artworks_type_id = "";
      this.tool_id = "";
      this.artworks_id = "";
      this.showMountType = false;
      this.showOfficeMountType = false;
      this.codeInfo.showSelect = true;
      this.currentSelectWeixinTabs = "image";
    },

    // 复制
    confirmCode(val) {
      const code = val[0].value;
      console.log(2323, this.currentAppletType, this.currentGuide);
      if (
        this.currentAppletType === "mp-weixin" &&
        this.currentGuide !== "officeGuide"
      ) {
        const currentCodeInfo = this.codeInfo.codeList.filter(
          (item) => item.code == code
        )[0];
        this.author_id = currentCodeInfo.authorInfo.id;
        this.getArtworksTypeAllListData();
        this.currentCode = code;
        this.showMountType = true;
      } else if (
        this.currentAppletType === "mp-weixin" &&
        this.currentGuide === "officeGuide"
      ) {
        this.currentCode = code;
        this.showOfficeMountType = true;
        let guideText = this.guideText.replace("【自己口令】", code);
        picCategoryList().then(res=>{
          res.data.navList.push({
            label:'达人主页',
            picType:'daren'
          },{
            label:'AI头像',
            picType:'touxiang'
          },{
            label:'视频',
            picType:'shiping'
          })
          this.navList = res.data.navList
        })
        this.guideText = guideText;
      } else if (this.currentGuide === "makeGuide") {
        this.currentCode = code;
        this.createQrcode(code);
      } else {
        let guideText = this.guideText.replace("【自己口令】", code);
        this.setClipboardData(guideText);
      }
    },

    // 生成二维码
    createQrcode(code) {
      let appletType = this.currentAppletType;
      if (this.currentAppletType === "mp-toutiao") {
        const page = `pages/index/index?search_code=${code}&isAuthor=1`;
        const qrCodeText = `snssdk1128://microapp?app_id=${
          this.applet_id
        }&scene=024007&start_page=${encodeURIComponent(page)}`;
        uQRCode.make({
          canvasId: "qrcode",
          componentInstance: this,
          text: qrCodeText,
          size: 400,
          margin: 20,
          backgroundColor: "#ffffff",
          foregroundColor: "#000000",
          fileType: "jpg",
          errorCorrectLevel: uQRCode.errorCorrectLevel.L,
          success: (res) => {
            if (res) {
              this.douyinQrcode = res;
            }
          },
        });
      } else if (this.currentAppletType === "mp-kuaishou") {
        const page = `pages/index/index?search_code=${code}&isAuthor=1`;
        // const page = '/subPages/author/detail?toPage=&uid=16179&mid=130&code=1771&aid=4173&tpy=1&dt=1&at=9&tc=3&st=1&sh=1&&caid=';
        const qrCodeText = `ksminiapp://miniapp?appId=${
          this.applet_id
        }&shareObjectId=${this.applet_id}&path=${encodeURIComponent(page)}`;
        uQRCode.make({
          canvasId: "qrcode",
          componentInstance: this,
          text: qrCodeText,
          size: 400,
          margin: 20,
          backgroundColor: "#ffffff",
          foregroundColor: "#000000",
          fileType: "jpg",
          errorCorrectLevel: uQRCode.errorCorrectLevel.L,
          success: (res) => {
            if (res) {
              this.douyinQrcode = res;
            }
          },
        });
      }
      this.showPromotion = true;
    },

    // 设置剪切板
    setClipboardData(txt) {
      uni.setClipboardData({
        data: txt,
        success: function () {
          uni.showToast({
            title: "复制成功",
            icon: "none",
            mask: false,
          });
        },
      });
    },

    // 切换指引
    changeGuide(itemData, guideType) {
      itemData.currentGuide = guideType;
      this.currentGuide = guideType;
    },

    // 点击示意
    handleUsed(itemData) {
      this.used.info = {
        bg_usage_guide: itemData.bg_usage_guide,
        dy_usage_guide: itemData.dy_usage_guide,
      };
      this.used.show = true;
    },

    // 前往上传页面
    goArtworksCenter() {
      uni.switchTab({
        url: "/pages/creativeCenter/index",
      });
    },

    // 前往记录
    goWeixinArticleUrlLog() {
      uni.navigateTo({
        url: "/pages/index/weixinArticleUrlLog",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.applet-guide-container ::v-deep .u-mode-center-box {
  background-color: transparent;
}

.applet-guide-container {
  padding: 32rpx;
}

.applet-content {
  padding: 24rpx;
  border-radius: 10rpx;
  background-color: #fff;
  border: 2rpx solid #eaeaea;
  margin-bottom: 24rpx;

  .applet-detail {
    display: flex;
    margin-bottom: 32rpx;
  }

  .applet-logo {
    width: 120rpx;
    height: 120rpx;
    border-radius: 10rpx;
  }

  .applet-info {
    margin-left: 24rpx;
    flex: 1;
  }

  .applet-name {
    font-size: 32rpx;
    font-weight: bold;
  }

  .applet-des {
    margin-top: 12rpx;
    height: 68rpx;
    font-size: 24rpx;
    color: #888;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
}

.center-content {
  display: flex;
  background-color: #f3f7fb;
  border-radius: 10rpx;
  border: 2rpx solid $uni-color-primary2;
  padding: 12rpx;
  position: relative;
  height: 68rpx;
  overflow: hidden;
  margin-bottom: 32rpx;

  .commission-des {
    color: #333;
    font-size: 28rpx;
    margin-right: 48rpx;
    display: flex;
    align-items: center;

    .ratio-text {
      padding-right: 10rpx;
      display: inline-block;
      position: relative;

      ::before {
        display: block;
        background-color: $uni-color-primary;
        content: " ";
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        width: 2rpx;
        height: 28rpx;
      }
    }

    .ratio-number {
      padding-left: 10rpx;
      color: $uni-color-primary;
      display: inline-block;
      height: 40rpx;
    }

    .applet-icon {
      width: 36rpx;
      height: 36rpx;
      display: inline-block;
      margin-left: 10rpx;
    }
  }

  .upload-artworks-btn {
    width: 160rpx;
    line-height: 64rpx;
    height: 68rpx;
    position: absolute;
    right: 0;
    top: 0;
    color: #fff;
    font-size: 24rpx;
    text-align: center;
    background-color: $uni-color-primary;
  }
}

.guide-header-container {
  display: flex;
  align-items: center;
  margin-bottom: 32rpx;

  .guide-header-left {
    flex: 1;
    display: flex;

    .btn-item {
      margin-right: 12rpx;
      font-size: 24rpx;
      line-height: 24rpx;
      font-weight: 500;
      color: #a2a0a8;
      padding: 18rpx;
      border-radius: 12rpx;
      background: #f5f6f8;
    }

    .active-item {
      background-color: #f3f7fb;
      color: $uni-color-primary;
    }
  }

  .guide-header-right {
    width: 134rpx;
    text-align: right;
    font-size: 24rpx;
    color: $uni-color-primary;
  }
}

.guide-content {
  background-color: #f3f7fb;
  border-radius: 10rpx;
  border: 2rpx solid $uni-color-primary2;
  padding: 0 24rpx;

  .copywriter-guide-item {
    display: flex;
    padding: 24rpx;
    border-bottom: 2rpx solid #d3c8fc;
    align-items: center;

    .copywriter-guide-item-left {
      flex: 1;
      font-size: 24rpx;
      word-wrap: break-word;
      word-break: break-all;
    }

    .copywriter-guide-item-right {
      width: 92rpx;
      height: 48rpx;
      padding: 12rpx 24rpx;
      font-size: 24rpx;
      line-height: 22rpx;
      color: #fff;
      background: $uni-color-primary2;
      border-radius: 8rpx;
      white-space: nowrap;
      margin-left: 24rpx;
    }
  }

  .copywriter-guide-item2 {
    border: 2rpx solid #d5dcf0;
    padding: 12rpx 24rpx;
    border-radius: 10rpx;
    margin-bottom: 12rpx;
  }

  .border-none {
    border-bottom: none;
  }
}

.bg-guide {
  padding: 24rpx 0;
}

.video-guide {
  height: 340rpx;
  width: 100%;
}

.mountGuide-guide {
  padding: 32rpx 0;

  .mountGuide-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: $uni-color-primary;
    margin-bottom: 24rpx;
  }

  .header-right {
    width: 180rpx;
    height: 46rpx;
    background: #fff;
    border: 2rpx solid $uni-color-primary;
    border-radius: 23rpx;
    justify-content: space-between;
    padding: 0 24rpx;
    font-size: 24rpx;
    color: $uni-color-primary;
    display: flex;
    align-items: center;
  }

  .weixin-herf {
    width: 100%;
    height: 130rpx;
    margin: 0 auto;
    background: #fff;
    border: 2rpx solid #eeedf2;
    border-radius: 10rpx;
    font-size: 26rpx;
    color: #b8b8b8;
    padding: 0 24rpx !important;
    overflow: hidden;
    word-break: break-all;
    margin-bottom: 24rpx;
  }

  .mount-footer {
    display: flex;

    .herf-log {
      width: 130rpx;
      height: 72rpx;
      background: #fff;
      border: 2rpx solid $uni-color-primary;
      border-radius: 10rpx;
      font-size: 26rpx;
      color: $uni-color-primary;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 24rpx;
    }

    .copy-btn {
      display: flex;
      flex: 1;
      border: 2rpx solid #d5dcf0;
      align-items: center;
      justify-content: center;
      border-radius: 10rpx;
      color: #8986a8;
    }
  }
}

.empty {
  text-align: center;
  color: #888;
}

.popup-content {
  padding: 24rpx;
  background: #fff;
  border-radius: 16rpx;
}

.video-view {
  width: 100%;
  border-radius: 8rpx;
  min-height: 552rpx;
  overflow: hidden;
  padding: 0 16px;
  position: relative;

  .video-guide {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }
}

.close-icon {
  padding: 24rpx;
  display: flex;
  justify-content: center;
}

.wechat-popup {
  width: 630rpx;
  height: 950rpx;
  overflow: hidden;
  background-image: url(https://img.alicdn.com/imgextra/i4/1888948409/O1CN01YGP2Wf2BzNSgEbeuJ_!!1888948409.png);
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: 100% 100%;

  .header {
    width: 100%;
    height: 112rpx;
    padding-left: 32rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .current-code {
      width: 410rpx;
      height: 52rpx;
      padding: 0 24rpx;
      border-radius: 10rpx;
      background: #f3f7fb;
      display: flex;
      align-items: center;
      justify-content: center;

      .left {
        padding-right: 6rpx;
        color: #a5adba;
      }

      .code {
        color: $uni-color-primary;
        flex: 1;
      }
    }

    .change-code {
      display: flex;
      width: 190rpx;
      height: 100%;
      font-size: 26rpx;
      color: #172b4d;
      justify-content: center;
      align-items: center;
    }
  }
  .office-m{
    .image-content {
      padding: 0 32rpx;

      .image-type-item {
        width: 100%;
        height: 60rpx;
        background: #fafafc;
        border: 2rpx solid #d5dcf0;
        border-radius: 16rpx;
        margin-bottom: 18rpx;
        padding: 0 24rpx;
        transition: 0.1s;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .checkbox {
        width: 48rpx;
        height: 48rpx;
      }

      .type-name {
        flex: 1;
        overflow: hidden; // 超出一行文字自动隐藏
        text-overflow: ellipsis; // 文字隐藏后添加省略号
        white-space: nowrap; // 强制不换行
      }

      .tool_image {
        width: 60rpx;
        height: 60rpx;
        margin-right: 12rpx;
        border-radius: 10rpx;
      }
    }
  }
  
  .select-weixin-tabs {
    margin: 28rpx auto 0;
    width: 570rpx;
    height: 68rpx;
    background: #f3f7fb;
    border-radius: 10rpx;
    padding: 4rpx;
    position: relative;
    display: flex;
    align-items: center;

    .tabs-item {
      flex: 1;
      height: 60rpx;
      line-height: 60rpx;
      text-align: center;
    }

    .tabs-active-item {
      background-color: $uni-color-primary;
      color: #fff;
      border-radius: 10rpx;
    }
  }

  .select-scroll {
    width: 100%;
    height: 610rpx;
    overflow: hidden;
    margin-top: 24rpx;
  }

  .select-scroll2 {
    height: 690rpx;
  }

  .scroll-container {
    width: 100%;
    height: 610rpx;
    overflow: hidden;

    .image-content {
      padding: 0 32rpx;

      .image-type-item {
        width: 100%;
        height: 90rpx;
        background: #fafafc;
        border: 2rpx solid #d5dcf0;
        border-radius: 16rpx;
        margin-bottom: 18rpx;
        padding: 0 24rpx;
        transition: 0.1s;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .checkbox {
        width: 48rpx;
        height: 48rpx;
      }

      .type-name {
        flex: 1;
        overflow: hidden; // 超出一行文字自动隐藏
        text-overflow: ellipsis; // 文字隐藏后添加省略号
        white-space: nowrap; // 强制不换行
      }

      .tool_image {
        width: 60rpx;
        height: 60rpx;
        margin-right: 12rpx;
        border-radius: 10rpx;
      }
    }
  }

  .wechat-popup-footer {
    width: 100%;
    height: auto;
    padding: 16rpx 32rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .close {
      width: 160rpx;
      height: 80rpx;
      background: #f3f7fb;
      border-radius: 10rpx;
      font-size: 28rpx;
      color: #172b4d;
      text-align: center;
      line-height: 80rpx;
      margin-right: 24rpx;
    }

    .cread-link {
      flex: 1;
      height: 80rpx;
      background: $uni-color-primary;
      border-radius: 10rpx;
      font-size: 28rpx;
      color: #fff;
      text-align: center;
      line-height: 80rpx;
    }
  }
}

.tool-container {
  position: relative;

  .tool-tip-title {
    text-align: center;
    font-size: 32rpx;
    color: $uni-color-primary;
    padding: 24rpx 0;
    font-weight: bold;
    background: linear-gradient(to bottom, #babbf8, #ffffff);
    position: relative;
    z-index: 1;
  }

  .tool-content {
    padding: 32rpx;
    // border: 2rpx solid #ececec;
    border-radius: 16rpx;
    margin: 0 32rpx 32rpx;
  }

  .tool-btn {
    color: #fff;
    background-color: $uni-color-primary;
    text-align: center;
    padding: 16rpx 0;
    border-radius: 16rpx;
    margin-bottom: 32rpx;
  }

  .tool-qrcode {
    padding: 32rpx;
    border: 2rpx solid #ececec;
    border-radius: 16rpx;
  }

  .save-tip {
    font-size: 28rpx;
    padding-top: 24rpx;
    text-align: center;
    color: #333;
  }

  .qrcode-image {
    width: 400rpx;
    height: 400rpx;
    display: block;
    margin: auto;
  }

  .close-btn {
    position: absolute;
    top: 24rpx;
    right: 24rpx;
    z-index: 99;
  }

  .video-view {
    padding: 0 32rpx;

    .video-guide {
      width: 100%;
      height: 250rpx;
      border-radius: 16rpx;
    }
  }

  .qrcode-title {
    font-size: 32rpx;
    margin-bottom: 12rpx;
    font-weight: bold;
    text-align: center;
  }

  .qrcode-sub-title {
    font-size: 24rpx;
    color: #9394fa;
    text-align: center;
    margin-bottom: 24rpx;
  }
}
</style>
